<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <!-- <div slot="header" class="clearfix">
        <span>报价信息</span>
      </div>-->
      <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, idx) of tabs"
          :key="idx"
          :label="item.name"
        ></el-tab-pane>
      </el-tabs>-->
      <el-radio-group v-model="currTab" size="small">
        <el-radio-button :label="item.id" v-for="(item, idx) of tabdata" :key="idx">{{ item.name }}</el-radio-button>
      </el-radio-group>
      <el-table
        :data="tableData"
        max-height="300"
        border
        style="width: 100%"
        class="mr_vertical_10"
      >
        <el-table-column prop="org_name" label="机构名称" width="180"></el-table-column>
        <el-table-column prop="did" label="数字身份"></el-table-column>
        <el-table-column label="机构类型">
          <template slot-scope="scope">
            <span>{{scope.row.type === 'buyer' ? '消费方' : scope.row.type === 'saler' ? '产销方' : '电网组织'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bus_id" label="所有电网母线编号"></el-table-column>
        <el-table-column prop="show_time" label="注册时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status === 'active' ? '活跃' : scope.row.status === 'inactive' ? '待审核' : '已禁用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status === 'active'" type="text" size="small" @click="handleApproval(scope.row)">审核</el-button>
            <!-- <el-button type="text" size="small" @click="handlePurchase(scope.row)">查看</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handlePageChanged="handlePageChanged"
        :page.sync="pageNo"
        :pageView.sync="pageSize"
        :totalElements.sync="total"
      />
    </el-row>

    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      :width="width"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :type="dlgCptType"
        :action="action"
        :categoryType="categoryType"
        :choice="action == 'search'"
        :selected="selected"
        @selected="selectedf"
        @close="dlgVib = false"
        @locale="locale"
        @refresh="init"
      />
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page
  }
})
export default class MyApplication extends Vue {
  // for diog
  protected dlgVib: boolean = false;
  protected dlgTitle: string = "";
  protected dlgCpt: any = null;
  protected width: any = "";
  protected currTab: any = 0;
  protected tabdata: any = [
    { name: "全部", id: 0 },
    { name: "待审核", id: 'inactive' }
  ];
  // protected tabs: any = [
  //   { name: "全部", idx: 0, id: 0 },
  //   { name: "待审核", idx: 1, id: 1 },
  // ];

  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;

  protected tableData: any = [];
  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected created() {
    this.init();
  }
  @Watch('currTab')
  protected init() {
    const params: any = {
      page_no: this.pageNo,
      page_size: this.pageSize
    };
    if (this.currTab) {
      params.status = this.currTab
    }
    this.$api.getAccountsQuery(params).then((res: any) => {
      const {
        data: { accounts, paginator: {page_no, page_size, total_count} }
      } = res;
      accounts.forEach((el: any) => {
        const time = "show_time";
        el[time] = Vue.prototype.$fmtDate(el.created_at);
      });
      this.tableData = accounts
      // .map((el: any) => {
      //   if (el.status !== 'active') {
      //     return el
      //   }
      // });
      this.pageSize = page_size;
      this.pageNo = page_no;
      this.total = total_count;
    });
  }
  protected async handleApproval(row: any) {
    const params: any = {
      identifier: row.identifier,
      result: ""
    };
    try {
      await this.$confirm("请审核信息", "审核提醒", {
        confirmButtonText: "通过",
        cancelButtonText: "拒绝",
        type: "warning"
      });
      params.result = "approve";
    } catch (error) {
      params.result = "reject";
      this.$message({
        message: "已拒绝",
        type: "info"
      });
    }
    this.$api.accountReview(params).then(() => {
      this.$message.success("已审核");
      this.init();
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


